<template>
    <div>
        <my-head title="找回密码">
            <template #left>
                <div class="back" @click="gotobackall">
                    <van-icon name="revoke" size="18" color="#ff5f16" />
                </div>
            </template>
        </my-head>
        <van-form
        @submit="onSubmit"  
        @failed="onFailed"
        class="form"
        >
        <van-field
            v-model="form.phone"
            name="phone"
            label="手机号"
            left-icon="phone-o"
            clearable
            
            placeholder="手机号"
            :rules="[
                {required:true,message:'请输入手机号'},
                {pattern:reg.phone,message:'请输入正确的手机号'}
            ]"
        >
        </van-field>

        <van-field
            v-model="form.captcha"
            left-icon="qr"
            name="captcha"
            clearable
            label="验证码"
            placeholder="验证码"
            :rules="[
                {required:true,message:'请输入验证码'},
                {pattern:reg.code,message:'请输入四位数字验证码'}
            ]"
            >
            <template #button>
                <van-button v-if="toggle" @click="startSend" :disabled="disabled" size="small" type="primary">发送验证码</van-button>
                <van-button v-else disabled  size="small" type="default">等待 {{count}} S</van-button>
            </template>
        </van-field>
        <van-field
            v-model="form.password"
            :type="type"
            name="password"
            clearable
            left-icon="warn-o"
            label="重置密码"
            placeholder="重置密码"
            :rules="[
                { required: true, message: '请填写密码' },
                { pattern:reg.pwd, message:'请填写6-16位数字字母组合'}
            ]"
            :right-icon="type!='password'?'eye-o':'closed-eye'"
            @click-right-icon="changeType"
        />
        <div style="margin: 16px 0;" class="links">
            <router-link :to="{name:'register'}" class="aitem color1 " >没有账号,请注册</router-link>
            <router-link :to="{name:'login'}" class="aitem color2 " >登录</router-link>
        </div>
        <div style="margin: 16px 0;">
            <van-button  block type="primary" native-type="submit">确定找回</van-button>
            <van-button class="mt20" block type="danger" native-type="reset">重置</van-button>
        </div>
    </van-form>
    </div>
</template>

<script>
export default {
    data(){
        return {
            form:{

            },
            toggle:true,
            count:180,
            type:'password'
        }
    },
    methods:{
        changeType(){
            this.type = this.type=='password' ?'text':'password'
        },
        async onSubmit(value){
            // 修改密码   
            let res = await this.$ajax.findUser({
                phone:value.phone
            })
            if(res.length>0){
                // 校验验证码
                let result = await this.$ajax.verifyCaptcha({
                    phone:value.phone,
                    captcha:value.captcha 
                })
                console.log(result)
                if(result.code==200){
                    // 真正修改密码  
                    this.$ajax.changepass(res[0].id,{
                        password:value.password 
                    })
                    .then(res=>{
                        this.ShowSuccess('密码找回成功')
                        this.changeUserInfo(null)
                        this.$router.push({name:'login'})
                    })
                }
            }else{
                this.showFailMsg('手机号未注册,请先注册')
            }
        },
        onFailed(){
            this.showFailMsg('请输入有效的数据信息')
        },
        startSend(){
            // 防抖 
            this.timeDown()
            // 发送验证码 
            this.$ajax.sendCaptcha({
                phone:this.form.phone 
            }).then(res=>{
                console.log(res)
                if(res.code==200){
                    this.ShowSuccess("发送成功")
                }
            })
            
        },
        timeDown(){
            this.toggle = false;
            this.count--;
            var timer = setInterval(()=>{
                if(this.count>0){
                    this.toggle = false;
                    this.count--;
                }else{
                    clearInterval(timer)
                    timer = null;
                    this.toggle = true;
                    this.count = 180;
                }
            },1000)
        },
    },
    computed:{
        disabled(){
            return !this.reg.phone.test(this.form.phone)
        }
    },
}
</script>

<style lang="scss" scoped>
.form{
    padding:14px;
    .mt20{
        margin-top: 14px;
    }
}
</style>